<template>
  <el-tabs
      v-model="activeKey"
      type="border-card"
      @tab-click="clickHandler"
      @tab-remove="clickRemove"
      @contextmenu.prevent.native="openContextMenu($event)"
  >
    <el-tab-pane
        v-for="item in tabsList"
        :key="item.path"
        :label="item.title"
        :name="item.path"
        :closable="item.path !== '/dashboard'"
    >

    </el-tab-pane>
    <div style="min-height: 680px;">
      <router-view></router-view>
    </div>
  </el-tabs>

  <!-- 右键菜单 -->
  <ul v-show="contextMenuVisible" :style="{left:left + 'px',top: top + 'px'}" class="contextmenu">
    <li @click="closeAllTabs">关闭所有</li>
    <li @click="closeOtherTabs('left')">关闭左边</li>
    <li @click="closeOtherTabs('right')">关闭右边</li>
    <li @click="closeOtherTabs('other')">关闭其他</li>
  </ul>
</template>
<script lang="ts" setup>
import {computed, onBeforeMount, Ref, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {Itab} from "../../../store/type";
import store from "../../../store";


const route = useRoute()
const router = useRouter()

const tabsList = computed(() => {
  return store.getters.getAddTab
})

// 索引
const activeKey = ref('')

// 添加 tab
const addTab = () => {
  const {meta, path} = route
  const tab: Itab = {
    path: path,
    title: meta.title as string
  }
  store.commit('addTab', tab)
}

// 点击 tab
const clickHandler = (event: any) => {
  router.push({path: event.props.name})
}

// 移除 tab
const clickRemove = (targetName: string) => {
  if(tabsList.value.length === 1){
    return;
  }
  // 如果删除的是当前页面，
  if(activeKey.value === targetName){
    tabsList.value.forEach((tab:Itab,index:number) =>{
      if(tab.path === targetName){
        const nextTab = tabsList.value[index + 1] ? tabsList.value[index + 1] : tabsList.value[index - 1]
        if(nextTab){
          activeKey.value = nextTab.path
        }
      }
    })
  }
  store.commit('closeCurrentTab',targetName)
  router.push({path: activeKey.value})
}

watch(() => route.path, () => {
  activeKey.value = route.path
  addTab()
})

// 右键显示菜单列表i
const contextMenuVisible:Ref<Boolean> = ref(false);
const left = ref('')
const top = ref('')
const openContextMenu = (event: any)=>{
  if(event.srcElement.id){
    let currentContextTabId = event.srcElement.id.split("-")[1]
    store.commit('saveCurContextTabId',currentContextTabId)
    contextMenuVisible.value = true;
    left.value = event.clientX
    top.value = event.clientY + 10
  }
}

const closeAllTabs = ()=>{
  store.commit('closeAllTabs')
  contextMenuVisible.value = false
  router.push('/')
  if(activeKey.value == '/dashboard'){
    addTab()
  }
}

const closeOtherTabs = (par: string)=>{
  store.commit('closeOtherTabs',par)
  contextMenuVisible.value = false
}

// 刷新缓存数据
const refresh = () => {
  window.addEventListener('beforeunload', () => {
    sessionStorage.setItem("TABS_ROUTES", JSON.stringify(tabsList.value))
  })

  let session = sessionStorage.getItem('TABS_ROUTES')
  if (session) {
    let tabItem = JSON.parse(session)
    tabItem.forEach((tab: Itab) => {
      store.commit("addTab", tab)
    })
  }
}

// 初始页面操作
onBeforeMount(() => {

  // 刷新页面后设置选中的tab
  activeKey.value = route.path

  // 初始化页面，生成TAB
  if(store.getters.getAddTab.length == 0){
    addTab()
  }

  // 刷新保存数据
  refresh()
})

// 监控右键删除列表
watch(()=>contextMenuVisible.value,()=>{
  if(contextMenuVisible.value){
    window.addEventListener("click",()=> contextMenuVisible.value = false)
  }else{
    window.removeEventListener("click",()=>contextMenuVisible.value = false)
  }
})
</script>

<style scoped lang="scss">

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  //font-weight: 600;
}

.contextmenu{
  width: 100px;
  margin: 0;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0,0,0,2);
  li {
    margin: 0;
    padding: 7px 16px;
    &:hover{
      background: #f2f2f2;
      cursor: pointer;
    }
  }
}
</style>
